<template>
	<div class="MachineStatus">
		<div class="MachineStatus_header">
			<div class="seach">
				<el-input placeholder="请输入内容" v-model="seachKey" class="input-with-select">
				    <el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
		</div>
		<div class="MachineStatus_content">
			<div class="Machine_group">
				<el-collapse v-model="activeNames" @change="handleChange">
				  <el-collapse-item title="设备组" name="1">
				    <el-row :gutter="10">
			    	  	<el-col :xs="8" :sm="7" :md="7" :lg="6" :xl="4" v-for="(item,index) in 6" :key="index">
				    	  	<div class="Machine_group_item" @click="$router.push('/machineeidt')">
								<div class="title">智慧路灯<span>{{'设备编号：ZH' + (1060 + index)}}</span></div>
								<div class="content">
									<span class="el-icon-circle-check"></span>
									<span>设备状态：正常</span>
								</div>
				    	  	</div>
			    	  	</el-col>
			    	</el-row>
				  </el-collapse-item>
				  <el-collapse-item title="设备组" name="2">
				    <el-row :gutter="10">
			    	  	<el-col :xs="8" :sm="7" :md="7" :lg="6" :xl="4" v-for="(item,index) in 2" :key="index">
				    	  	<div class="Machine_group_item" @click="$router.push('/machineeidt')">
								<div class="title">视频<span>{{'设备编号：VD' + (1070 + index)}}</span></div>
								<div class="content">
									<span class="el-icon-circle-check"></span>
									<span>设备状态：正常</span>
								</div>
				    	  	</div>
			    	  	</el-col>
			    	</el-row>
				  </el-collapse-item>
				  <el-collapse-item title="设备组" name="3">
				    <el-row :gutter="10">
			    	  	<el-col :xs="8" :sm="7" :md="7" :lg="6" :xl="4" v-for="(item,index) in 4" :key="index">
				    	  	<div class="Machine_group_item" @click="$router.push('/machineeidt')">
								<div class="title">环境监测<span>{{'设备编号：HJ' + (1080 + index)}}</span></div>
								<div class="content">
									<span class="el-icon-circle-check"></span>
									<span>设备状态：正常</span>
								</div>
				    	  	</div>
			    	  	</el-col>
			    	</el-row>
				  </el-collapse-item>
				</el-collapse>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeNames: ['1','2','3'],
				seachKey: '',
			}
		},
		methods: {
			handleChange() {

			}
		}
	}
</script>
<style>
	.MachineStatus {
		width: 100%;
		height: 100%;
	}
	.MachineStatus_header {
		background-color: #fff;
		border-top: 1px solid #E9EEF3;
		height: 50px;
	}
	.MachineStatus_header:after {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}
	.MachineStatus_header > .seach {
		width: 220px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 20px;
	}
	.MachineStatus_header > .seach .el-input__inner {
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
	}
	.MachineStatus_header > .seach .el-input-group__append {
		background-color: rgba(42, 88, 173,.9);
		color: #fff;
		border-color: rgba(42, 88, 173,.9);
	}
	.MachineStatus_content {
		padding: 20px;
	}
	.MachineStatus_content .el-collapse-item {
		margin-bottom: 20px;
	}
	.MachineStatus_content .el-collapse-item__content {
		padding: 10px;
	}
	.MachineStatus_content .el-collapse-item__content .el-row {
		margin-bottom: 10px;
	} 
	.MachineStatus_content .el-collapse-item__content .el-row:last-child {
		margin-bottom: 0;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item {
		border-radius: 3px;
		margin-bottom: 10px;
		border: 1px solid #E9EEF3;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item:hover {
		box-shadow: 1px 1px 5px rgba(76, 209, 55,.5);
		cursor: pointer;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .title {
		border-bottom: 1px solid #E9EEF3;
		padding-left: 10px;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .title > span:nth-child(1) {
		float: right;
		margin-right: 10px;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content {
		height: 80px;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content:after {
		content: '';
		height: 100%;
		display: inline-block;
		vertical-align: middle;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content span {
		margin-right: 10px;
		vertical-align: middle;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content span:first-child {
		margin-left: 10px;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content span:last-child {
		margin: 0;
	}
	.MachineStatus_content .el-collapse-item__content .Machine_group_item .content .el-icon-circle-check {
		font-size: 60px;
		color: rgba(76, 209, 55,.9);
	}
	.MachineStatus_content .el-collapse-item__header {
		padding-left: 20px;
	}
	.MachineStatus_content .el-collapse-item__header.is-active {
		border-bottom: 1px solid #E9EEF3;
	}
	.MachineStatus_content .el-collapse .el-collapse-item .el-collapse-item__header {
	    color: #f88976;
	    font-size: 17px;
	}
</style>